<script setup>
	import {
		ref,computed
	} from 'vue'

	const settings = defineProps({
		collapse: Boolean,
		width: String
	})

	const iconColor = ref('color:#F8FAFB')
	
	import { useRoute } from 'vue-router';
	const route = useRoute();
	const activeMenu = computed(() => {
		console.log(111,route.matched[0]?.path)
		console.log(222,route.path)
	  return route.matched[0]?.path || route.path;
	});
</script>


<template>
	<el-aside :width="settings.width">
		<el-scrollbar>
			<el-menu :default-openeds="['1', '3']" :collapse="settings.collapse" active-text-color="#F8FAFB" :default-active="activeMenu" 
				background-color="#1A1C1E" text-color="#74767A" :router="true">
				<el-menu-item index="1" route="/">
					<el-icon>
						<House />
					</el-icon>
					<template #title>
						<span>首页</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/ServiceUser">
					<el-icon>
						<User />
					</el-icon>
					<template #title>
						<span>人员管理</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/UserAccount">
					<el-icon>
						<UserFilled />
					</el-icon>
					<template #title>
						<span>账号管理</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/SysDict">
					<el-icon>
						<UserFilled />
					</el-icon>
					<template #title>
						<span>数据字典</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/NoteManage">
					<el-icon>
						<Memo />
					</el-icon>
					<template #title>
						<span>帖子管理</span>
					</template>
				</el-menu-item>
				<el-sub-menu index="2">
					<template #title>
						<el-icon>
							<CreditCard />
						</el-icon><span>营销管理</span>
					</template>
					<el-menu-item index="/CardBatch">卡券管理</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="3">
					<template #title>
						<el-icon>
							<ShoppingTrolley />
						</el-icon><span>订单管理</span>
					</template>
					<el-menu-item index="/OrderManage" route="/1">订单管理</el-menu-item>
					<el-menu-item index="/OrderManage" route="/">退款管理</el-menu-item>
					<el-menu-item index="/OrderManage" route="/1">评价管理</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="4">
					<el-icon>
						<Coin />
					</el-icon>
					<template #title>
						<span>佣金管理</span>
					</template>
				</el-menu-item>
				<el-sub-menu index="5">
					<template #title>
						<el-icon>
							<Message />
						</el-icon><span>财务管理</span>
					</template>
					<el-menu-item index="/admin/comments" route="/1">储值管理</el-menu-item>
					<el-menu-item index="/admin/comments" route="/">储值订单</el-menu-item>
					<el-menu-item index="/admin/comments" route="/1">财务管理</el-menu-item>
					<el-menu-item index="/admin/comments" route="/">提现申请</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="User">
					<el-icon>
						<Avatar />
					</el-icon>
					<template #title>
						<span>客户管理</span>
					</template>
				</el-menu-item>
				<el-menu-item index="6">
					<el-icon>
						<Coordinate />
					</el-icon>
					<template #title>
						<span>实名认证</span>
					</template>
				</el-menu-item>
				<el-menu-item index="7">
					<el-icon>
						<BellFilled />
					</el-icon>
					<template #title>
						<span>紧急报警</span>
					</template>
				</el-menu-item>
				<el-sub-menu index="8">
					<template #title>
						<el-icon>
							<setting />
						</el-icon><span>设置管理</span>
					</template>
					<el-menu-item index="/admin/comments" route="/1">车费设置</el-menu-item>
					<el-menu-item index="/admin/comments" route="/">城市设置</el-menu-item>
					<el-menu-item index="/admin/comments" route="/1">出行设置</el-menu-item>
					<el-menu-item index="/admin/comments" route="/">其他设置</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-scrollbar>
	</el-aside>
</template>

<style scoped>
	.el-aside {
		height: 100vh;
		overflow: hidden;
		box-shadow: var(--el-box-shadow-lighter);
	}

	.el-scrollbar {
		height: 100vh;
		overflow: hidden;
		background-color: #1A1C1E;
	}

	.el-menu {

		border-right: none;
	}
</style>